<template>
  <div class="instroduce-page">
    <div class="introduce-area">
      <introduce-header
        @introduceClose="handleIntroduceClose"
        :chooseList="chooseList"
      ></introduce-header>
      <introduce-message
        :chooseList="chooseList"
      ></introduce-message>
      <introduce-footer
        @introduceClose="handleIntroduceClose"
        :chooseList="chooseList"
      ></introduce-footer>
    </div>
  </div>
</template>

<script>
/* eslint-disable eqeqeq */
import IntroduceHeader from './introduce/header'
import IntroduceMessage from './introduce/message'
import IntroduceFooter from './introduce/footer'
import axios from 'axios'
export default {
  name: 'RecommendIntroduce',
  components: {
    IntroduceHeader,
    IntroduceMessage,
    IntroduceFooter
  },
  data () {
    return {
      chooseList: {}
    }
  },
  methods: {
    handleIntroduceClose () {
      this.$emit('close')
    },
    getIntroduceInfo () {
      axios.get('/api/detail.json', {
        params: {
          id: this.$route.params.id
        }
      }).then(this.handleGetDataSucc)
    },
    handleGetDataSucc (res) {
      res = res.data
      if (res.ret && res.data) {
        const data = res.data
        const recommendList = data.recommendList
        for (let i = 0; i < recommendList.length; i++) {
          if (recommendList[i].id == this.$route.params.id) {
            this.chooseList = recommendList[i]
          }
        }
      }
    }
  },
  mounted () {
    this.getIntroduceInfo()
  }
}
</script>

<style lang="stylus" scoped>
  .instroduce-page
    position: fixed;
    z-index: 92;
    top: .8rem;
    left: 0;
    right: 0;
    bottom: 0;
    .introduce-area
      position: fixed;
      z-index: 92;
      top: .8rem;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
</style>
